<template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="mod-guide__guideserveroute}">
      <el-form
        :inline="true"
        :model="dataForm"
        @keyup.enter.native="getalldata()"
      >
        <el-form-item>
          <el-input
            v-model="dataForm.name"
            placeholder="请输入导览图名称"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="dataForm.active"
            clearable
            placeholder="请选择激活状态"
          >
            <el-option label="未激活" value="0"></el-option>
            <el-option label="激活" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="getalldata()">{{ $t("query") }}</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addnew">新增</el-button>
        </el-form-item>
      </el-form>
      <el-table
        v-loading="dataListLoading"
        :data="dataList"
        border
        style="width: 100%"
      >
        <el-table-column
          prop="url"
          label="文件路径"
          min-width="200"
          :show-overflow-tooltip="true"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="active"
          width="100"
          align="center"
          :show-overflow-tooltip="true"
          label="激活状态"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.active == 0">未激活</span>
            <span v-if="scope.row.active == 1">激活</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="导览图名称"
          min-width="110"
          :show-overflow-tooltip="true"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="createDate"
          label="生成时间"
          width="160"
          :show-overflow-tooltip="true"
          align="center"
        ></el-table-column>
        <el-table-column
          :label="$t('handle')"
          fixed="right"
          align="center"
          width="190"
        >
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="editdata(scope.row)"
              >修改
            </el-button>
            <el-button
              v-if="scope.row.active == 0"
              type="text"
              size="small"
              @click="Confirmtheorder(scope.row)"
              >激活
            </el-button>
            <el-button
              v-if="scope.row.active == 1"
              type="text"
              size="small"
              @click="Confirmnotheorder(scope.row)"
              >取消激活
            </el-button>
            <el-button type="text" size="small" @click="Viewpicture(scope.row)"
              >查看
            </el-button>
            <el-button type="text" size="small" @click="deletedata(scope.row)"
              >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="pageSizeChangeHandle"
        @current-change="pageCurrentChangeHandle"
        :current-page="dataForm.page"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="dataForm.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
      <!-- 弹窗, 新增 / 修改 -->
      <el-dialog :title="tishi" :visible.sync="dialogVisible" width="50%">
        <div class="diadiv">
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="130px"
            class="demo-ruleForm"
          >
            <el-form-item label="导览图名称" prop="name">
              <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="导览图(最多1张)" prop="url">
              <el-upload
                class="avatar-uploader"
                :action="url"
                :show-file-list="true"
                :multiple="false"
                :limit="1"
                :on-remove="handleRemove"
                :on-success="
                  (res, file, fileList) => handleAvatarSuccess(res, file, 'url')
                "
                :before-upload="(file) => beforeUploadHandle(file, 'url')"
              >
                <img v-if="ruleForm.url" :src="ruleForm.url" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="resetForm">取 消</el-button>
          <el-button type="primary" @click="submitForm">确 定</el-button>
        </span>
      </el-dialog>
    </div>

    <el-dialog title="图片" :visible.sync="dialogVisibleimg" width="60%">
      <div class="seeimg">
        <!--<img :src="imgsrc" alt="">-->
        <el-image
          style="width: 100%; height: 500px"
          :src="imgsrc"
          fit="contain"
        ></el-image>
      </div>
    </el-dialog>
    <!-- 裁剪框 -->
    <cropper-dlg
      v-if="showCropper"
      :dialogVisible.sync="showCropper"
      :img-file="currentFile"
      ref="vueCropper"
      @upload="cropperUpload"
    ></cropper-dlg>
  </el-card>
</template>

<script>
import Cookies from "js-cookie";
export default {
  data() {
    return {
      url: `${
        window.SITE_CONFIG["apiURL"]
      }/oss/file/aliyunUpload?access_token=${Cookies.get("access_token")}`,
      fileList: [],
      tishi: "",
      linshidata: {},
      dialogVisible: false,
      dataListLoading: false,
      total: 0,
      dialogVisibleimg: false,
      imgsrc: "",
      dataList: [],
      dataForm: {
        name: "",
        page: 1,
        limit: 10,
        active: "",
      },
      ruleForm: {
        name: "",
        url: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入导览图名称", trigger: "blur" },
        ],
      },
      currentFile: "",
      cropperIndex: null,
      showCropper: false, //裁剪弹框
      isCropper: true, //上传之前是否显示裁剪
    };
  },
  components: {},
  created() {
    this.getalldata();
  },
  methods: {
    Viewpicture(e) {
      this.imgsrc = "";
      this.dialogVisibleimg = true;
      this.imgsrc = e.url;
    },

    addnew() {
      this.tishi = "新增";
      this.dialogVisible = true;
      this.linshidata = {};
    },
    // 上传之前
    beforeUploadHandle(file, name) {
      if (
        file.type !== "image/jpg" &&
        file.type !== "image/jpeg" &&
        file.type !== "image/png" &&
        file.type !== "image/gif"
      ) {
        this.$message.error(
          this.$t("upload.tip", {
            format: "jpg、png、gif",
          })
        );
        return false;
      }
      if (this.isCropper) {
        //显示裁剪
        this.currentFile = file;
        this.cropperIndex = name;
        this.showCropper = true;
        this.$nextTick(() => {
          this.$refs.vueCropper.init();
        });
        return false;
      }
    },
    cropperUpload(data) {
      this.showCropper = false;
      if (data != "close") {
        //裁剪成功后获取的图片
        this.$http.post("/oss/file/aliyunUpload", data).then((res) => {
          if (res.data.code == 0) {
            this.handleAvatarSuccess(res.data, "", this.cropperIndex);
          }
        });
      }
    },
    handleAvatarSuccess(res, file, key) {
      this.ruleForm[key] = res.data.url;
    },
    // 上传成功
    successHandle1(res, file, fileList) {
      if (res.code !== 0) {
        return this.$message.error(res.msg);
      }
      this.ruleForm.url = res.data.url;
    },
    handleRemove(file, fileList) {
      if (fileList.length == 0) {
        this.ruleForm.url = "";
      } else {
        this.ruleForm.url = fileList
          .map((item) => {
            return item;
          })
          .toString();
      }
    },

    submitForm(formName) {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if (this.ruleForm.url == "") {
            this.$message.error("请添加导览图");
          } else {
            if (this.tishi == "新增") {
              this.$http.post("/sys/ismapguide", this.ruleForm).then((res) => {
                //  console.log('111111111111111111',res)
                if (res.data.code == 0) {
                  this.$message({
                    message: "新增成功",
                    type: "success",
                  });
                  this.ruleForm = {
                    name: "",
                    url: "",
                  };
                  this.fileList = [];
                  this.dialogVisible = false;
                  this.dataForm.page = 1;
                  this.getalldata();
                } else {
                  this.$message.error(res.data.msg);
                }
              });
            } else {
              this.linshidata.name = this.ruleForm.name;
              this.linshidata.url = this.ruleForm.url;
              this.$http.put("/sys/ismapguide", this.linshidata).then((res) => {
                if (res.data.code == 0) {
                  this.$message({
                    type: "success",
                    message: "修改成功!",
                  });
                  this.ruleForm = {
                    name: "",
                    url: "",
                  };
                  this.fileList = [];
                  this.dialogVisible = false;
                  this.dataForm.page = 1;
                  this.getalldata();
                } else {
                  this.$message.error(res.data.msg);
                }
              });
            }
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs.ruleForm.resetFields();
      this.dialogVisible = false;
      this.fileList = [];
      this.ruleForm = {
        name: "",
        url: "",
      };
      this.dataForm.page = 1;
      this.getalldata();
    },
    getalldata() {
      this.dataListLoading = true;
      this.$http
        .get("/sys/ismapguide/page", {
          params: this.dataForm,
        })
        .then((res) => {
          //  console.log('111111111111111111',res)
          this.dataListLoading = false;
          if (res.data.code == 0) {
            this.dataList = res.data.data.list;
            this.total = res.data.data.total;
          } else {
            this.$message.error(res.data.msg);
          }
        });
    },
    pageSizeChangeHandle(val) {
      this.dataForm.limit = val;
      this.getalldata();
    },
    pageCurrentChangeHandle(val) {
      this.dataForm.page = val;
      this.getalldata();
    },

    editdata(e) {
      this.linshidata = {};
      this.tishi = "修改";
      this.ruleForm.name = e.name;
      this.ruleForm.url = e.url;
      this.dialogVisible = true;
      this.linshidata = e;
    },

    deletedata(e) {
      this.$confirm("此操作将删除该条数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http.delete("/sys/ismapguide", { data: [e.id] }).then((res) => {
            if (res.data.code == 0) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.dialogVisible = false;
              this.dataForm.page = 1;
              this.getalldata();
            } else {
              this.$message.error(res.data.msg);
            }
          });
        })
        .catch(() => {});
    },
    Confirmnotheorder(e) {
      this.$confirm("此操作将取消激活该条数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          e.active = "0";
          this.$http.put("/sys/ismapguide", e).then((res) => {
            if (res.data.code == 0) {
              this.$message({
                type: "success",
                message: "取消激活成功!",
              });
              this.dialogVisible = false;
              this.dataForm.page = 1;
              this.getalldata();
            } else {
              this.$message.error(res.data.msg);
            }
          });
        })
        .catch(() => {});
    },
    Confirmtheorder(e) {
      this.$confirm("此操作将激活该条数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          e.active = "1";
          this.$http.put("/sys/ismapguide", e).then((res) => {
            if (res.data.code == 0) {
              this.$message({
                type: "success",
                message: "激活成功!",
              });
              this.dialogVisible = false;
              this.dataForm.page = 1;
              this.getalldata();
            } else {
              this.$message.error(res.data.msg);
            }
          });
        })
        .catch(() => {});
    },
  },
};
</script>
<style lang="scss" scoped>
.diadiv {
  width: 100%;
}
</style>
